<template>
	<view class="work_container">
		<view class="material-contianer">
			<view class="material-box">
				<template>
					<view class="m-i-box" v-for="(item, index) in rowBox" :key="index">
						<template v-if="!item.isHidden">
							<view class="i-t-name top">
								<view>施工工序{{ index + 1 }}</view>
								<view class="btn" @click="delColumn(index)">
									<u-button text="删除" type="error" size="small"></u-button>
								</view>
							</view>
							<view class="i-t-name" @click="clickItem(index)">
								<view class="require-red">施工工序</view>
								<view class="right">
									<view :class="item.processName ? 'r-v' : 'r-v opcity'">
										{{ item.processName ? item.processName : '请选择施工工序' }}
									</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<view class="i-t-name" @click="fnSelectRing(index)">
								<view class="require-red">环号</view>
								<view class="right">
									<view :class="item.ringNumber ? 'r-v' : 'r-v opcity'">
										{{ item.ringNumber ? item.ringNumber : '请选择环号' }}
									</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
							<view style="font-size: 32rpx; margin: 10rpx 0; padding-left: 30rpx">施工图片</view>
							<view class="grid_img" style="margin-left: 20rpx">
								<u-upload
									ref="imgRef"
									:fileList="rowBox[index].fileListImg"
									@afterRead="afterRead($event, index)"
									@delete="deletePic($event, index)"
									name="Img"
									multiple
									:maxCount="9"
									:previewFullImage="true"
									accept="image"
								></u-upload>
							</view>
						</template>
					</view>
				</template>
			</view>
			<view style="margin: 0 20rpx" @click="addColumn">
				<view class="plain-btn">
					<view style="margin: auto; display: flex; align-items: center">
						<u-icon name="plus" color="#2979ff"></u-icon>
						<text>添加工作量明细</text>
					</view>
				</view>
			</view>
			<view class="little_count">小计 {{ total }}环</view>
		</view>
		<!-- 测试 -->
		<level-linkage :ref="`levelLinkage`" :pickerValueDefault="pickerValueDefault" :allData="treeData" @onConfirm="onConfirm" themeColor="#007AFF"></level-linkage>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { getEventShoppingCartList } from '@/api/emergency/emergencyDispatch.js';
import levelLinkage from '@/components/three-level-linkage/linkage.nvue';
//工序列表
import { steelRingProcedureGetList, pmPlanWorkloadList, getReportedProcedureList, watermark, getReportableRingNumber } from '@/api/comprehensive/comprehensive.js';
import { uploadFile } from '@/utils/request';
import { getPicture, deleteImg, doc_deleteAttachs } from '@/api/doc.js';
import mixins from '@/utils/mixins.js';
import { getToken } from '@/utils/auth.js';
import { imgFun } from '@/utils/common.js';
import fileMixin from '@/mixins/file.js';
const hytc = '环氧填充';
let timer;
let flag;
/**
 * 节流原理：在一定时间内，只能触发一次
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function throttle(func, wait = 1000, immediate = true) {
	if (immediate) {
		if (!flag) {
			flag = true;
			// 如果是立即执行，则在wait毫秒内开始时执行
			typeof func === 'function' && func();
			timer = setTimeout(() => {
				flag = false;
			}, wait);
		}
	} else if (!flag) {
		flag = true;
		// 如果是非立即执行，则在wait毫秒内的结束处执行
		timer = setTimeout(() => {
			flag = false;
			typeof func === 'function' && func();
		}, wait);
	}
}
export default {
	components: {
		levelLinkage
	},
	mixins: [mixins, fileMixin],
	props: {
		ghObject: {
			type: Object,
			default: () => ({})
		},
		ghPmprId: {
			type: Number,
			default: -1
		}
	},
	watch: {
		rowBox: {
			handler(newVal, oldVal) {
				if (newVal) {
					let newArr = this.rowBox.map((item) => ({
						...item,
						totalWorkLoad:
							this.ghObject.constructionMethod === 'gh' ? item.workload * item.ringNumber.split(',').length : (item.workload / 2) * item.ringNumber.split(',').length
					}));
					let subNum = 0;
					newArr.forEach((it) => {
						subNum += it.totalWorkLoad;
					});
					this.total = Math.floor(subNum * 100) / 100;
					this.filterTreeData();
				}
			},
			deep: true
		}
	},
	beforeDestroy() {
		this.$store.commit('setCompressionImageThis', null);
	},
	data() {
		return {
			pickerValueDefault: [0, 0],
			pickerText: '',
			treeData: [],

			// 头
			itemIndex: -1, // 当前点击选择器的下标
			type: '', // 进度填报工作量类型 1钢环 2微扰动
			name: '工作量',
			list: [
				{
					name: '工作量'
				},
				{
					name: '材料消耗'
				}
			],
			isShowName: false, // 工序选择picker
			rowBox: [
				{
					processName: '', //施工工序
					ringNumber: '', // 环号
					steelRingProcedureId: '', //工序Id
					fileListImg: [], //视频照片 //图片
					docId: '', //图片id  后续接口要用
					workload: 0,
					updateIds: []
				}
			],
			rules: {},
			nameColumns: [], //	施工工序绑定的数组第一列
			columnData: [], // 第二列
			ringsList: [], // 环号数组
			flatList: [], //  将所有工环平铺后的数据
			optionList: [], // 对应工序可选的环号数组
			sendRings: [], // 传递给下个页面的环数数组
			tabIndex: 0, //tabs下标
			formData: {}, // 文件对象
			total: 0, // 小计总数
			pmprWorkloads: {
				pmprWorkloads: []
			},
			deleteFileImgs: []
		};
	},
	async mounted() {
		this.$store.commit('setCompressionImageThis', this);
		let pro1 = this.getWorkLoadList();
		let pro2 = this.getRingList();
		let pro3 = this.getSelectedNums();

		Promise.all([pro1, pro2, pro3]).then((res) => {
			this.filterTreeData();
		});
	},
	methods: {
		filterTreeData() {
			const rowBox = this.rowBox;
			if (rowBox.length === 0) return;
			let temList = [];
			this.treeData.forEach((item) => {
				if (item.children && item.children.length) {
					for (let item1 of item.children) {
						item1.disabled = false;
						temList.push(item1);
					}
				} else {
					item.disabled = false;
					temList.push(item);
				}
			});
			for (let item of rowBox) {
				for (let item1 of temList) {
					if (item1.id === item.steelRingProcedureId) {
						this.$set(item1, 'disabled', true);
					}
				}
			}
		},
		onConfirm(val) {
			// 切换 施工工序的时候 需要先将之前相关的数据进行删除
			let index = this.rowBox.findIndex((item) => item.steelRingProcedureId == this.rowBox[this.itemIndex].steelRingProcedureId);
			console.log(index, 'index找');
			if (index > -1) {
				for (let i = this.rowBox.length - 1; i >= 0; i--) {
					if (this.rowBox[i].belong == this.rowBox[this.itemIndex].steelRingProcedureId) {
						this.rowBox.splice(i, 1);
					}
				}
			}
			this.rowBox[this.itemIndex].steelRingProcedureId = val.firstPick.id;
			this.rowBox[this.itemIndex].workload = val.firstPick.workload;
			this.rowBox[this.itemIndex].grouping = val.firstPick.grouping;
			this.rowBox[this.itemIndex].isSplit = val.firstPick.isSplit;
			if (val.secondPick.id !== '') {
				this.rowBox[this.itemIndex].steelRingProcedureId = val.secondPick.id;
				this.rowBox[this.itemIndex].workload = val.secondPick.workload;
				this.rowBox[this.itemIndex].grouping = val.secondPick.grouping;
				this.rowBox[this.itemIndex].isSplit = val.secondPick.isSplit;
			}

			// 该组件选择第一列的时候屁股会多出一个 '-' 字符
			if (val.name.indexOf('/') === val.name.length - 1) {
				val.name = val.name.replace('/', '');
			}
			this.rowBox[this.itemIndex].processName = val.name; //绑定在input上
			this.rowBox[this.itemIndex].ringNumber = '';

			//选择图片后需要清空，不然水印会有问题
			this.rowBox[this.itemIndex].fileListImg = [];
			this.rowBox[this.itemIndex].docId = '';
			this.filterTreeData();
		},
		/**
		 * 循环绑定在页面上的数据， 在allData中找到所有匹配名字的禁用
		 * 如果编辑有需要, 调用这个方法,在之前得给页面上绑定数据 this.rowBox工序名得对应上 -> 大侧板安装-小侧板 这种;中间用 '-' 拼接
		 * @param {Boolean} isDisabled 布尔值 true禁用 false启用
		 */
		clickItem(index) {
			this.itemIndex = index;
			this.$emit('clickByGhItem', index);
			//重新刷新数据
			this.rowBox = [...this.rowBox];
		},
		//  对象数组去重
		deduplicationObj(obj) {
			var uniques = [];
			var stringify = {};
			for (var i = 0; i < obj.length; i++) {
				var keys = Object.keys(obj[i]);
				keys.sort(function (a, b) {
					return Number(a) - Number(b);
				});
				var str = '';
				for (var j = 0; j < keys.length; j++) {
					str += JSON.stringify(keys[j]);
					str += JSON.stringify(obj[i][keys[j]]);
				}
				// eslint-disable-next-line no-prototype-builtins
				if (!stringify.hasOwnProperty(str)) {
					uniques.push(obj[i]);
					stringify[str] = true;
				}
			}
			// eslint-disable-next-line no-self-assign
			uniques = uniques;
			return uniques;
		},
		// 数据拼接
		dataConcat(arr, id) {
			let obj = {
				ringNumer: ''
			};
			let temp = arr.filter((it) => it.steelRingProcedureId === id);
			// 拼接
			temp.forEach((item) => {
				obj['ringNumer'].length <= 0 ? (obj['ringNumer'] += item.ringNumer + ',') : (obj['ringNumer'] += ',' + item.ringNumer + ',');
				// 去掉最后的逗号
				obj.ringNumer = obj.ringNumer.substring(0, obj.ringNumer.length - 1);
				obj.steelRingProcedureId = item.steelRingProcedureId;
			});

			obj.ringNumer = [...obj.ringNumer.split(',')];
			obj.ringNumer = Array.from(new Set(obj.ringNumer));
			obj.ringNumer.sort();
			return obj;
		},

		//18.4.查询项目计划工作量-施工工法钢环已经上报的工序信息
		// 出参 steelRingProcedureId 钢环工序id  ringNumber  //环号
		// 获取已被使用过的环号
		getSelectedNums() {
			return getReportedProcedureList({
				pmId: this.ghObject.pmId, //项目id	//表单选择的项目id
				lineSiteSectionType: this.ghObject.lineSiteSectionType, //站点区间类型
				lineSiteSectionId: this.ghObject.lineSiteSectionId, //站点或区间id
				pmprId: this.ghPmprId === -1 ? undefined : this.ghPmprId
			}).then((res) => {
				if (res.success && res.status === 1) {
					let result = res.result.pmprWorkloads;
					this.pmprWorkloads = JSON.parse(JSON.stringify(res.result));
					// console.log(result,' 计划')
					let array = [];
					let temp = JSON.parse(JSON.stringify(result));
					//将已选环号处理出来
					result.forEach((item, index) => {
						array.push(this.dataConcat(temp, item.steelRingProcedureId));
					});
					result = this.deduplicationObj(array).map((item) => ({
						...item,
						ringNumer: item.ringNumer.join(',')
					}));
					//获取平铺后的所有工序
					// this.flatFn(this.gongxuList)
					let newArr2 = this.flatList.map((it) => ({
						...it,
						Num: result.find((item) => item.steelRingProcedureId === it.id) || ''
					}));

					newArr2.forEach((item) => {
						if (item.Num && item.Num.ringNumer) {
							item.ringNumer = item.Num.ringNumer.split(',');
						}
					});
					// console.log(newArr2, 'newArr2')
					// 将对应工序下的已选环号与所有环号相对比，将已选环号排除
					this.optionList = newArr2.map((item) => ({
						...item,
						optional: this.ringsList.filter((item1) => !(item.ringNumer || []).includes(String(item1)))
					}));
					// console.log(this.optionList, this.rowBox,'367行数据')
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 将数据平铺
		flatFn(source) {
			console.log(source, 'souc');
			source.forEach((el) => {
				this.flatList.push(el);
				el.children && el.children.length > 0 ? this.flatFn(el.children) : ''; // 子级递归
			});
		},
		// 获取工序列表
		getWorkLoadList() {
			return steelRingProcedureGetList({
				pmId: this.ghObject.pmId,
				lineId: this.ghObject.lineId,
				lineSiteSectionId: this.ghObject.lineSiteSectionId,
				lineSiteSectionType: this.ghObject.lineSiteSectionType,
				constructionMethod: this.ghObject.constructionMethod
			}).then((res) => {
				if (res.success && res.status == 1) {
					this.gongxuList = res.result;
					this.treeData = this.gongxuList.map(({ id, name, children, workload, grouping, isSplit }, index) => {
						return {
							id,
							name,
							workload,
							children,
							grouping,
							isSplit
						};
					});
					this.nameColumns = [res.result];
					this.columnData = res.result.map((item) => item.children);
				}
			});
		},
		// 获取所有的环号
		getRingList() {
			let resq = {
				params: {
					pmId: this.ghObject.pmId, //项目id
					lineSiteSectionType: this.ghObject.lineSiteSectionType, //站点区间类型(字典表-line_site_section_type)
					lineSiteSectionId: this.ghObject.lineSiteSectionId, //站点或区间id
					constructionMethod: this.ghObject.constructionMethod //施工工法（字典表-construction_method）
				},
				currPage: 1,
				pageSize: 999
			};
			return pmPlanWorkloadList(resq).then((res) => {
				if (res.result.list.length > 0) {
					let temp = res.result.list[0].ringNumbers;
					this.ringsList = this.getRingNumbers(temp);
				}
			});
		},
		// 601-610,611,612 特定字符串转成数组
		getRingNumbers(strNo = '') {
			const result = [];
			strNo.split(',').forEach((rr) => {
				let [s, e] = rr.split('-');
				e = e || s;
				while (Number(s) <= Number(e)) result.push(s++);
			});
			return result;
		},

		// 选择环号
		async fnSelectRing(index) {
			if (this.rowBox[index].processName === '') {
				return uni.showToast({
					title: '请先选择施工工序',
					icon: 'none'
				});
			}
			//重新刷新数据
			this.rowBox = [...this.rowBox];
			await this.getUsableData(this.rowBox[index].grouping, this.rowBox[index].isSplit, this.rowBox[index].steelRingProcedureId);
			let tempArr = [];
			if (this.rowBox[index].ringNumber) {
				tempArr = this.rowBox[index].ringNumber.split(',') || [];
			}
			//选择图片后需要清空，不然水印会有问题
			this.rowBox[index].fileListImg = [];
			this.rowBox[index].docId = '';
			if (this.sendRings.length <= 0) {
				return uni.showToast({
					title: '暂无可选环号',
					icon: 'none'
				});
			}
			throttle(() => {
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectRing?index=${index}&data=${JSON.stringify(
						this.sendRings
					)}&tempArr=${JSON.stringify(tempArr)}`,
					events: {
						getData: (data) => {
							this.rowBox[index].ringNumber = data.data.list.join(',');
							this.dealHytc(JSON.parse(JSON.stringify(this.rowBox[index])));
						}
					}
				});
			});
		},
		// 对环氧填充进行单独处理
		dealHytc(obj) {
			console.log(obj, 'obj---');
			// 如果选择了环氧填充
			if (obj && obj.processName && obj.processName.split('/')[0] == hytc) {
				let hytcItem = this.treeData.find((item) => item.name === hytc);
				// 排序后 需要进行切半 分为左右
				hytcItem.children = hytcItem.children.sort((a, b) => a.id - b.id);
				const length = hytcItem.children.length;
				// 左边数据
				let leftData = hytcItem.children.slice(0, Math.floor(length / 2));
				// 右边数据
				let rightData = hytcItem.children.slice(Math.floor(length / 2), length);
				obj.list = [];
				let workingProcedure = obj.processName.split('/')[1];
				let selectDate = {};
				let isLeft = false;
				if (leftData.find((item) => item.name == workingProcedure)) {
					isLeft = true;
					selectDate = leftData.find((item) => item.name == workingProcedure);
				}
				if (rightData.find((item) => item.name == workingProcedure)) {
					isLeft = false;
					selectDate = rightData.find((item) => item.name == workingProcedure);
				}
				let circulateData = isLeft ? leftData : rightData;
				circulateData.forEach((item, index) => {
					if ((isLeft && item.id < selectDate.id) || (!isLeft && item.id > selectDate.id)) {
						if (index == 0) {
							obj.constructionMethod3 = `${hytc}/${item.name}~${workingProcedure}`; // 用于显示 区间
						}
						// 将当前侧 小于当前选择项id的都放到 obj的list中
						// 施工图片挂在 选择项中 带过去的docId就设置为空即可
						let pmprWorkloadsMap = {};
						this.pmprWorkloads.pmprWorkloads.forEach((pmprWorkload) => {
							if (!pmprWorkloadsMap[pmprWorkload.steelRingProcedureId]) {
								pmprWorkloadsMap[pmprWorkload.steelRingProcedureId] = [];
							}
							pmprWorkloadsMap[pmprWorkload.steelRingProcedureId].push(pmprWorkload.ringNumer);
						});

						// 对应工序已经有过上报记录
						if (pmprWorkloadsMap[item.id]) {
							// 对应工序 已经上报的环号
							let ringNumbers = pmprWorkloadsMap[item.id];
							// 对应工序 没有上报的环号
							let notInRingNumbers = [];
							obj.ringNumber.split(',').forEach((item) => {
								if (!ringNumbers.includes(item)) {
									notInRingNumbers.push(item);
								}
							});
							if (notInRingNumbers.length > 0) {
								this.rowBox.push({
									processName: `${hytc}-${item.name}`,
									ringNumber: notInRingNumbers.join(','),
									steelRingProcedureId: item.id,
									grouping: item.grouping,
									fileListImg: [],
									docId: '',
									workload: item.workload,
									isHidden: true, //在表格中 用于控制隐藏的数据
									belong: obj.steelRingProcedureId
								});
							}
						} else {
							// debugger
							// 对应工序没有上报记录
							this.rowBox.push({
								processName: `${hytc}-${item.name}`,
								ringNumber: obj.ringNumber,
								steelRingProcedureId: item.id,
								fileListImg: [],
								docId: '',
								workload: item.workload,
								isHidden: true, //在表格中 用于控制隐藏的数据
								belong: obj.steelRingProcedureId,
								grouping: item.grouping
							});
						}
					}
				});
				this.filterTreeData();
			}
		},
		fnTabClick(val) {
			this.tabIndex = val.index;
		},
		// 添加按钮事件
		addColumn() {
			for (let i = 0; i < this.rowBox.length; i++) {
				if (!this.rowBox[i].processName || !this.rowBox[i].ringNumber) {
					return uni.showToast({
						title: `请填写完整第${i + 1}项的数据`,
						icon: 'none'
					});
				}
			}
			this.rowBox.push({
				processName: '', //工序名称
				ringNumber: '', //环号
				steelRingProcedureId: '', //工序Id
				fileListImg: [], //视频照片
				docId: '', //照片id 将来传参用
				workload: 0 //工作量系数
			});
		},
		// 删除行按钮事件
		delColumn(index) {
			if (this.rowBox.length <= 1) {
				return uni.showToast({
					title: '至少保留一项',
					icon: 'none'
				});
			}
			let cloneDeleteItem = JSON.parse(JSON.stringify(this.rowBox[index]));
			console.log(this.rowBox, '635行');
			this.rowBox.splice(index, 1);
			// 如果含有belong  就说明需要进行特殊处理 需要将相关的数据全部删除 并且 清除disable的状态
			if (this.rowBox.find((item) => item.belong == cloneDeleteItem.steelRingProcedureId)) {
				// this.rowBox = this.rowBox.filter(item => item.belong != cloneDeleteItem.steelRingProcedureId)
				for (let i = this.rowBox.length - 1; i >= 0; i--) {
					if (this.rowBox[i].belong == cloneDeleteItem.steelRingProcedureId) {
						// this.delItemCancelDisabled(i);
						this.filterTreeData();
						this.rowBox.splice(i, 1);
					}
				}
			}
			this.filterTreeData();
		},
		// 删除图片
		async deletePic(event, index) {
			// if (event.file.id > 0) {
			// 	const delres = await deleteImg({
			// 		id: event.file.id
			// 	});
			// 	console.log(delres, '删除');
			// }
			if (event.file.id) {
				this.deleteFileImgs.push(event.file.id);
			}
			this.rowBox[index].fileListImg.splice(event.index, 1);
		},
		/**
		 * 获取到docId中的图片并且拼成网络路径格式
		 * @param {Number} docId
		 * @return {String} //拼好的网络路径格式
		 */
		async getItemImage(docId) {
			return await new Promise((resolve, reject) => {
				getPicture({
					docId
				})
					.then((res) => {
						resolve(
							res.result.map((it) => ({
								id: it.id,
								url: this.$config.IMG_FILE_URL + it.fileName
							}))
						);
					})
					.catch((err) => reject(err));
			});
		},
		
		async deleteFiles() {
			const array = [...this.deleteFileImgs];
			if (array.length) {
				await doc_deleteAttachs(array);
			}
		},
		
		uploadFileListAttach() {
			return new Promise(async (resolve, reject) => {
				for(let item of this.rowBox) {
					if (item.fileListImg.length) {
						const array = item.fileListImg.filter((it) => !it.id);
						const dataList = this.addWaterTxt(item);
						//施工前照片id
						item.docId = await this.uploadWaterMark(array, dataList, item.docId, { token: getToken() }, {}, 'file');
					}
				}
				resolve();
			});
		},
		addWaterTxt(obj) {
			let formData = {}
			formData.dateTime = this.getDate2(new Date)
			formData.fingNumber = obj.ringNumber
			formData.processName = obj.processName
			const arrList = [formData.fingNumber, formData.processName, formData.dateTime]
			return arrList
		},
		// 新增图片
		async afterRead(event, index) {
			console.log(this.rowBox[index])
			if (this.rowBox[index].processName === '' || this.rowBox[index].ringNumber === '') {
				return uni.showToast({
					title: '请先选择工序或者环号',
					icon: 'none'
				});
			}
			for (let item in event.file) {
				this.rowBox[index].fileListImg.push({
					...event.file[item]
				});
			}
			this.$forceUpdate();
		},
		/**
		 * @param {Object} val
		 * @param {Object} bool
		 * @param {Object} gxId 工序id
		 */
		getUsableData(val, bool, gxId) {
			// console.log(val,'===784')
			let resq = {
				pmId: this.ghObject.pmId, //项目id	//表单选择的项目id
				lineSiteSectionType: this.ghObject.lineSiteSectionType, //站点区间类型
				lineSiteSectionId: this.ghObject.lineSiteSectionId, //站点或区间id
				grouping: val,
				isSplit: bool,
				steelRingProcedureId: gxId,
				constructionMethod: this.ghObject.constructionMethod
			};
			return getReportableRingNumber(resq).then((res) => {
				this.sendRings = res.result.map(String);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.work_container {
	height: 100%;
	width: 100%;
}

.item_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;

	.top_reduce {
		// cursor: pointer;
		color: #16a7df;
	}
}

.content {
	padding: 35rpx;

	.value {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.value-nav {
		position: relative;

		.day {
			position: absolute;
			top: 10rpx;
			right: -50rpx;
		}
	}

	.addArea {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background: #f5f7fa;
		font-size: 32rpx;
		font-weight: bold;
		color: #445469;
		margin-top: 40rpx;
		text-align: center;
		margin-bottom: 40rpx;

		.image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: -13rpx;
		}
	}
}

.little_count {
	margin-top: 30rpx;
	text-align: right;
	padding-right: 30rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.btn_box {
	height: 100rpx;

	.btn_group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 100rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
	}
}

.value2 {
	display: flex;
	align-items: center;
	text-align: right;

	.none {
		flex: 1;
	}
}

.value-nav {
	position: relative;

	.day {
		position: absolute;
		top: 10rpx;
		right: -50rpx;
	}
}

.footer {
	position: relative;
	width: 100%;

	// height: 100rpx;
	.image {
		position: absolute;
		bottom: 0rpx;
		right: 140rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.select {
		position: absolute;
		bottom: 6rpx;
		right: 60rpx;
		font-size: 32rpx;
	}

	.num {
		position: absolute;
		bottom: 24rpx;
		right: 120rpx;
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		background-color: #f43530;
		color: #fff;
		z-index: 1;
	}
}

/deep/ .u-form-item__body__right__content__slot {
	flex-direction: column;
}

/deep/ .define-block {
	display: block;
}

/deep/ .u-upload__wrap {
	width: 85%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1;
}

.material-contianer {
	padding-bottom: 20rpx;
}

.material-box {
	margin: 0 20rpx 20rpx 20rpx;
	padding-top: 20rpx;

	.m-i-box {
		padding: 10rpx 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 5px;

		.i-t-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ededed;
			padding: 28rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #586981;

			.require-red::before {
				content: '*';
				color: red;
			}

			.btn {
				width: 130rpx;
			}

			.right {
				display: flex;
				align-items: center;

				.r-v {
					margin-right: 18rpx;
				}

				.r-v.opcity {
					opacity: 0.5;
				}
			}
		}

		.i-t-name.top {
			padding: 28rpx 10rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #445469;
		}

		.i-t-name.bottom {
			border: none;
		}
	}
}

.plain-btn {
	display: flex;
	align-items: center;
	color: #3d89ed;
	background-color: #fff;
	padding: 20rpx 0;
	border-radius: 5px;
	margin-bottom: 10rpx;
}

/deep/ .uni-input-input {
	text-align: right;
}
</style>
